import { View, Text, Icon, ScrollView, } from '@tarojs/components';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { useDispatch, useSelector } from 'react-redux';
import { decrement, increment } from '@/store/countSlice';
import IndexFooterBar from '@/components/IndexFooterBar';
import { Divider, Button, } from '@nutui/nutui-react-taro';
import { useEffect, useState } from 'react';
import MovieCard from '@/components/MovieCard';
import { setActivePage } from '@/store/userDataSlice';

import './movie.scss';




type movieProps = {
    id: number,
    nm: string,
    sc: string,
    img: string,
    rt: string,
    star: string,
    showInfo: string,
};

export default function Index() {
    const dispatch = useDispatch();
    const [movieList, setMovieList] = useState<movieProps[]>([]);
    const [isActive, setIsActive] = useState(0);

    const useData = useSelector((state: any) => state.userData);

    //设置当前页面footbar为active

    useDidShow(() => {
        document.documentElement.style.setProperty('--MovieIndexContainer-Title-active', String(0));
        dispatch(setActivePage("电影"));
        console.log(useData);
    });


    useLoad(() => {
        console.log('Page loaded.');
    });
    const handleClick = (index: number) => {
        document.documentElement.style.setProperty('--MovieIndexContainer-Title-active', String(index));
        setIsActive(index);
        console.log(index);
    };

    useEffect(() => {
        Taro.request({
            url: 'https://apis.netstart.cn/maoyan/index/movieOnInfoList',
            success: function (res) {
                setMovieList(res.data.movieList);
            }
        });
    }, []);


    return (
        <View className='MovieIndexContainer'>
            {/* <View className='text' ></View>
      <Text className='test2'>一二三123abc水饺皇后</Text> */}
            <View className='MovieIndexContainer-Title'>
                {["热门电影", "即将上映", "最受期待", "全部电影"].map((item, index) => <Text onClick={() => handleClick(index)} key={index}>{item}</Text>)}

                <View className='MovieIndexContainer-Title-decoration'></View>
            </View>

            <View className='IndexContainer'>
                {
                    movieList.map((item, index) => {
                        return (
                            <MovieCard key={movieList[index].id} props={item} />
                        );
                    })
                }
            </View>
            <View className=''></View>
            <IndexFooterBar />
        </View>
    );
}
